<!--
 * @Description: 
 * @Author: 赵大壮
 * @Date: 2021-12-08 14:10:35
 * @LastEditTime: 2022-05-23 18:16:15
 * @LastEditors: 赵大壮
-->
<template>
  <div class="w-w260 h-w140 border flex flex-row items-center justify-center">
    <div
      class="p-w10 flex flex-col items-center cursor-pointer"
      v-if="!path"
      @click="selectImg"
    >
      <div class="flex flex-row">
        <i class="el-icon-upload2"></i>
        <div class="text-f12">上传视频</div>
      </div>
      <input
        type="file"
        v-show="false"
        ref="fileRef"
        accept="video/*"
        @change="selecte_video"
      />
    </div>
    <video
      class="w-full h-full"
      v-else
      relative
      controls
      :src="path"
      controlslist="nodownload noremoteplayback disablePictureInPicture"
    ></video>
  </div>
</template>

<script lang="ts">
import nyMessageToast from "@/utils/NYMessageToast";
import { Component, Vue, Prop, Watch } from "vue-property-decorator";

@Component
export default class UiUploadImg extends Vue {
  @Prop() url: any;
  name = "";
  base64 = null;
  path = "";

  created() {}

  mounted() {}

  beforeDestroy() {}

  selectImg() {
    (this.$refs.fileRef as any).dispatchEvent(new MouseEvent("click"));
  }

  @Watch("url")
  watchValue(url: any, oldValue: string) {
    if (url != "") {
      this.path = url;
    }
  }
  /**
   * 选择图片返回
   */
  selecte_video(video: any) {
    var file = video.path[0].files[0];
    // if (file.size > 300 * 1024 * 1024) {
    //   nyMessageToast.warning("视频不能超过300M");
    //   return;
    // }
    this.path = this.getObjectURL(file);
    var imageData = {
      name: file.name,
      path: this.path,
      base64: file,
    };
    this.$emit("selecte_video", imageData);
    // var that = this;
    // var oFReader = new FileReader();
    // oFReader.readAsBinaryString(file);
    // oFReader.onloadend = function (oFRevent) {
    // console.log(oFRevent);
    //   var src = oFRevent.target!.result;
    //   that.path = src as string;
    //   that.base64 = oFReader.result as string;
    //   that.name = file.name as string;
    //   var imageData = {
    //     name: that.name,
    //     path: that.path,
    //     base64: file,
    //   };
    //   that.$emit("selecte_video", imageData);
    // };
  }

  getObjectURL(file: any) {
    var url = null;
    // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
    if ((window as any).createObjectURL != undefined) {
      // basic
      url = (window as any).createObjectURL(file);
    } else if (window.URL != undefined) {
      // mozilla(firefox)
      url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) {
      // webkit or chrome
      url = window.webkitURL.createObjectURL(file);
    }
    return url;
  }

  /**
   * 初始化控件
   */
  initView() {
    this.name = "";
    this.base64 = null;
    this.path = "";
    this.$emit("selecte_video", {
      name: this.name,
      path: this.path,
      base64: this.base64,
    });
  }
}
</script>
<style lang="less" scoped>
</style>
